<template>
    <div style="width:fit-content;margin:auto;min-height:80px">
        <div style="padding: 20px 0;display:flex">
            <el-scrollbar height="600px" v-if="this.$store.state.area.collegeId>0&&this.$store.state.user.groupId>0">
                <div style="padding:0 10px" v-loading="groupNoticeList == null">
                    <p style="text-align:center">班级公告</p>
                    <el-timeline>
                        <el-timeline-item center placement="top" v-for="notice in groupNoticeList"
                            :key="notice.noticeId" :type="notice.noticeLevel == 'error' ? 'danger' : notice.noticeLevel"
                            size="large" :timestamp="notice.formattedDate">
                            <el-alert :style="{ boxShadow: 'var(--el-box-shadow-light)' }" :title="notice.noticeTitle"
                                :type="notice.noticeLevel" :description="notice.noticeContent" show-icon :closable="false" />
                        </el-timeline-item>
                    </el-timeline>
                    <el-empty description="暂时还没有任何公告" v-if="groupNoticeList != null && groupNoticeList.length == 0" />
                </div>
            </el-scrollbar>
            <div style="height:100%;margin:0 10px"></div>
            <el-scrollbar height="600px">
                <p style="text-align:center">{{this.$store.state.area.collegeId>0?'学院公告':'公告'}}</p>
                <div style="padding:0 10px" v-loading="collegeNoticeList == null">
                    <el-timeline>
                        <el-timeline-item center placement="top" v-for="notice in collegeNoticeList"
                            :key="notice.noticeId" :type="notice.noticeLevel == 'error' ? 'danger' : notice.noticeLevel"
                            size="large" :timestamp="notice.formattedDate">
                            <el-alert :style="{ boxShadow: 'var(--el-box-shadow-light)' }" :title="notice.noticeTitle"
                                :type="notice.noticeLevel" :description="notice.noticeContent" show-icon :closable="false" />
                        </el-timeline-item>
                    </el-timeline>
                    <el-empty description="暂时还没有任何公告" v-if="collegeNoticeList != null && collegeNoticeList.length == 0" />
                </div>
            </el-scrollbar>
        </div>
    </div>
</template>
<script>
import { dateFormat } from '../assets/js/dateformat.js'
export default {
    data() {
        return {
            groupNoticeList: null,
            collegeNoticeList: null
        }
    },
    created() {
        setTimeout(() => {
            this.getLastCollegeNotice(this.$store.state.area.collegeId)
            if(this.$store.state.user.group==null)return
            this.getLastGroupNotice(this.$store.state.user.group.groupId)
        })
    },
    methods: {
        getLastGroupNotice(groupId) {
            if (this.$store.state.area.collegeId==0) return
            this.$request.get('/notice/notice_list?column=group&value=' + groupId).then(data => {
                this.groupNoticeList = data.data.data
            })
        },
        getLastCollegeNotice(collegeId) {
            this.$fetchutil.get('/browse/notice_list?column=college&value=' + collegeId,data=>{
                this.collegeNoticeList = data.data.data
            })
        },

    },
    watch: {
        '$store.state.area.collegeId'() {
            this.getLastCollegeNotice(this.$store.state.area.collegeId)
        },
        '$store.state.user.group.groupId'() {
            if(this.$store.state.user.group==null)return
            this.getLastGroupNotice(this.$store.state.user.group.groupId)
        },
        groupNoticeList() {
            if (this.groupNoticeList == null || this.groupNoticeList == []) return
            this.groupNoticeList.forEach(notice => {
                switch (notice.noticeLevel) {
                    case '警告': notice.noticeLevel = 'warning'
                        break
                    case '错误': notice.noticeLevel = 'error'
                        break
                    case '成功': notice.noticeLevel = 'success'
                        break
                    default: notice.noticeLevel = 'info'
                }
                let date = new Date(notice.noticeDate)
                notice.formattedDate = dateFormat(date, 'yyyy-MM-dd hh:mm:ss')
            })
            this.groupNoticeList.sort((notice1, notice2) => notice2.noticeDate - notice1.noticeDate)
        },
        collegeNoticeList() {
            if (this.collegeNoticeList == null || this.collegeNoticeList == []) return
            this.collegeNoticeList.forEach(notice => {
                switch (notice.noticeLevel) {
                    case '警告': notice.noticeLevel = 'warning'
                        break
                    case '错误': notice.noticeLevel = 'error'
                        break
                    case '成功': notice.noticeLevel = 'success'
                        break
                    default: notice.noticeLevel = 'info'
                }
                let date = new Date(notice.noticeDate)
                notice.formattedDate = dateFormat(date, 'yyyy-MM-dd hh:mm:ss')
            })
            this.collegeNoticeList.sort((notice1, notice2) => notice2.noticeDate - notice1.noticeDate)
        }
    }
}
</script>

<style scoped>

</style>